<script setup lang="ts">
import {useAccount} from "./utils/hook";
import {computed, nextTick, onMounted, ref} from "vue";
import {PureTableBar} from "@/components/RePureTableBar";
import {useRenderIcon} from "@/components/ReIcon/src/hooks";
import {deviceDetection, useResizeObserver} from "@pureadmin/utils";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { useRoute } from 'vue-router'
const route = useRoute()
import Refresh from "@iconify-icons/ep/refresh";
import Close from "@iconify-icons/ep/close";
import Check from "@iconify-icons/ep/check";

defineOptions({
  name: "BusinessReturnLog"
});


const formRef = ref();
const tableRef = ref();
const contentRef = ref();
const batchItem = ref('1')
const size = ref("small");
const {
  form, isShow, curRow, loading, columns, exportExcel,salesman_arr,
  rowStyle, statusList, selectedNum, onSelectionCancel, onbatchAct,
  dataList, treeData,treeProps, isLinkage, pagination, isExpandAll, isSelectAll, treeSearchValue,
  onSearch, shopList,searchCondList,
  resetForm, openDialog, handleMenu,  handleSave, handleDelete, filterMethod, transformI18n, onQueryChanged, handleSizeChange, handleCurrentChange,handleSelectionChange
} = useAccount(tableRef);

onMounted(() => {
  useResizeObserver(contentRef, async () => {
    await nextTick();
  });
});
</script>

<template>
  <div class="main">
    <el-form ref="formRef" :inline="true" :model="form" :size="size" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
      <el-form-item prop="saleman_id">
        <el-select v-model="form.saleman_id" placeholder="业务员" clearable filterable class="!w-[100px]">
          <el-option v-for="(item) in salesman_arr" :label="item.dept?.name+'-'+item.username" :value="item.id" :disabled="item.id==''"/>
        </el-select>
      </el-form-item>
      <el-form-item prop="search">
        <el-input v-model="form.search" style="max-width: 600px" autosize  placeholder="查询内容" class="input-with-select" >
          <template #prepend>
            <el-select v-model="form.search_field" placeholder="选择查询条件"  style="width: 100px">
              <el-option v-for="(item, index) in searchCondList" :label="'按'+item.name" :value="item.value" :disabled="item.value==''"/>
            </el-select>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item  prop="time">
        <el-select v-model="form.search_field2" placeholder="选择时间" class="search_field" style="width: 100px;border-radius:0">
          <el-option label="按申请时间" value="created_at" />
          <el-option label="按审核时间" value="audit_at" />
        </el-select>
        <el-date-picker
          v-model="form.time" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
          type="daterange" style="width: 200px;border-radius: 0px;border-left: 0;margin-left: -1px;"
          range-separator="~" prefix-icon=""
          start-placeholder="Start date" end-placeholder="End date"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :icon="useRenderIcon('ri:search-line')" :loading="loading" @click="onSearch"> {{ t("buttons.search") }}
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ t("buttons.reset") }}</el-button>
      </el-form-item>
    </el-form>

    <div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
      <PureTableBar
        :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
        style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
        :title="t(route.meta.title)"
        :columns="columns"
        @refresh="onSearch"
      >
        <template #title>
          <el-tabs v-model="form.audit_status" class="bg-bg_color w-[99/100] pt-[1px] overflow-auto" style="margin-top:-8px;height:90px;" @tab-click="onSearch">
            <el-tab-pane label="待审核" name="3"></el-tab-pane>
            <el-tab-pane label="已同意" name="1"></el-tab-pane>
            <el-tab-pane label="已驳回" name="2"></el-tab-pane>
            <div style="margin-right: 20px">
<!--              <el-button v-perms="'order_apply:btn:piliangshenghe'" v-if="form.audit_status=='3'" @click="onbatchAct('audit_result','')" :disabled="selectedNum == 0" :size="size">-->
<!--                {{ t("buttons.batchAudit") }}-->
<!--              </el-button>-->
              <el-button v-perms="'order_apply:btn:daochu'" :icon="useRenderIcon('fa-solid:file-export')" @click="exportExcel" :size="size">{{ t("buttons.exportExcel") }} </el-button>
            </div>
          </el-tabs>



        </template>
        <template v-slot="{ size, dynamicColumns }">
          <pure-table ref="tableRef" align-whole="center" showOverflowTooltip
            table-layout="auto" :loading="loading" :size="size" adaptive
            :row-style="rowStyle" :adaptiveConfig="{ offsetBottom: 108 }"
            :data="dataList" :columns="dynamicColumns" :border="true"
            :pagination="{ ...pagination, size }"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
            @selection-change="handleSelectionChange" @page-size-change="handleSizeChange"
            @page-current-change="handleCurrentChange">
            <template #operation="{ row }">
              <el-button v-perms="'order_apply:btn:audit'"  class="reset-margin" link type="primary" :size="size" v-if="form.audit_status==3" @click="onbatchAct('audit_result',row)">
                {{ t("buttons.audit") }}
              </el-button>
              <el-popconfirm :title="t('buttons.deleteConfirm')" @confirm="handleDelete(row)">
                <template #reference>
                  <el-button v-perms="'order_apply:btn:delete'"  class="reset-margin" link type="primary" :size="size">
                    {{ t("buttons.delete") }}
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
      <div v-if="isShow" class="!min-w-[calc(100vw-60vw-268px)] w-full mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto">
        <div class="flex justify-between w-full px-3 pt-5 pb-4">
          <div class="flex">
            <span :class="iconClass">
              <IconifyIconOffline v-tippy="{ content: '关闭'}"
                class="dark:text-white" width="18px" height="18px"
                :icon="Close" @click="handleMenu()" />
            </span>
            <span :class="[iconClass, 'ml-2']">
              <IconifyIconOffline
                v-tippy="{ content: '保存' }"
                class="dark:text-white"
                width="18px" height="18px" :icon="Check"
                @click="handleSave"/>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
:deep(.el-form--inline .el-form-item) {
  margin-right: 10px;
}
.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
:deep(.search_field .el-select__wrapper) {
  border-radius: 0;border-right: 0;
  margin-right: -1px;
}
</style>
